<template>
    <div class="createPost-container">
        <el-form ref="orderData" :model="orderData" :rules="rules" class="form-container">
            <div class="createPost-main-container">
                <el-row>
                  <el-col :span="24">
                    <div class="order-info-container">
                      <el-row align="center">
                        <el-col :span="6">
                          <el-form-item label-width="80px" label="订单编号:" prop="orderId" class="postInfo-container-item">
                            {{ orderData.orderId }}
                          </el-form-item>
                        </el-col>

                        <el-col :span="6">
                          <el-form-item label-width="80px" label="所属分类:" prop="cid" class="postInfo-container-item">
                            <el-input type="input" placeholder="请输入作者" />
                          </el-form-item>
                        </el-col>

                        <el-col :span="6">
                          <el-form-item label-width="80px" prop="sort" label="排序:" class="postInfo-container-item">
                            <el-input type="number" placeholder="请输入正整数" />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                    
                    <div class="order-info-container">
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label-width="80px" label="作者:" prop="auther" class="postInfo-container-item">
                            <el-input type="input" placeholder="请输入作者" />
                          </el-form-item>
                        </el-col>

                        <el-col :span="8">
                          <el-form-item label-width="80px" label="所属分类:" prop="cid" class="postInfo-container-item">
                            <el-input type="input" placeholder="请输入作者" />
                          </el-form-item>
                        </el-col>

                        <el-col :span="8">
                          <el-form-item label-width="80px" prop="sort" label="排序:" class="postInfo-container-item">
                            <el-input type="number" placeholder="请输入正整数" />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script>

import { getOrderInfo } from "@/api/order";

export default {
    data(){
        return {
            loading: false,
            formValid: true,
            orderData: {},
            rules: {
                
            }
        }
    },
    components: {  },
    created(){
      const id = this.$route.params && this.$route.params.id
      this.getInfo(id)
    },
    methods: {
        getInfo(id) { 
          this.listLoading = true;
          getOrderInfo({id: id}).then(response => {
            this.orderData = response.data;
            this.listLoading = false;

            console.log('orderData', this.orderData);
          });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}

.el-upload__tip{
    font-size:14px;
    padding-left:20px;
}
</style>